<template>
    <div class="box">
        <div class="header">
            <van-icon name="arrow-left" @click="$router.back" />
            意见反馈
        </div>
        <div class="suggest">
            <textarea v-model="feedback" maxlength="200" placeholder="请输入遇到的问题或建议..."></textarea>
            <div class="counter">{{ feedback.length }}/200</div>
            <div class="image">
                <p>相关图片(选填)</p>
                <van-uploader v-model="fileList" multiple :max-count="8" />
            </div>
        </div>
        <van-field v-model="tel" type="tel" label="联系方式" placeholder="手机号/QQ号/邮箱等，选填" />
        <p class="positions">我们不会将反馈内客速露给任何第三方及利益相关方,请放心填写。</p>
        <van-button block round @click="subMit">提交</van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'
const feedback = ref('')
const fileList = ref([])
const tel = ref('')
// 点击提交按钮，提交并清空数据
function subMit() {
    if (!feedback.value) {
        return showFailToast('请输入意见反馈')
    }
    feedback.value = ''
    fileList.value = []
    tel.value = ''
    showSuccessToast('提交成功')
}
</script>

<style lang="scss" scoped>
.van-button {
    background-color: #4bc4b1;
    color: #fff;
    margin-top: 60px;
}

.box {
    background-color: #f6f6f6;

    .suggest {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .image {
        margin: 10px 0;
        background-color: #fff;
        padding: 0 10px;

        p {
            padding: 10px 0;
        }
    }
}


.header {
    .van-icon {
        position: fixed;
        left: 10px;
        top: 15px;
        font-size: 20px;
    }
}

textarea {
    width: 100%;
    box-sizing: border-box;
    height: 200px;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

textarea::placeholder {
    color: #ccc;
}

.counter {
    position: fixed;
    right: 3%;
    top: 36%;
    text-align: right;
    color: #999;
}

.positions {
    color: #888;
    font-size: 12px;
}
</style>